<template>
	<view class="news-fun-box">
		<view class="list-box" v-for="item in newsFunList" :key="item">
			<view class="title-box">
				<image mode="widthFix" class="title-src" :src="item.icon" />
				<view class="title-text">{{ item.ranking }}</view>
			</view>
			<view class="content-box" v-for="(listItem, index) in item.list">
				<view :style="{  
						'color': index === 0 ? 'red' :   
						index === 1 ? '#e9782c' :   
						index === 2 ? '#f2b553' :   
                                    '#000'  
					}" class="content-sort">{{ index + 1 }}</view>
				<view class="content-text" @click="toDatails(item, listItem.id)">{{ listItem.title }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, ref } from 'vue';
	import { jumpToNewsDetails } from '@/utils/jump.js'
	
	const props = defineProps({
		tabsId: String || null
	});

	// 新闻趣事数据格式
	const newsFunList = ref([
		{
			ranking: '成都榜',
			icon: 'https://fyb-pc-static.cdn.bcebos.com/static/asset/novel_5fb0d32e1a2fa7f88230f0f5465e857f.png',
			list: [
				{
					id: 1,
					title: '习近平抵达杜尚别'
				},
				{
					id: 2,
					title: '孙海洋称孙卓高考成绩超预期'
				},
				{
					id: 3,
					title: '英国首相苏纳克将宣布辞职'
				},
				{
					id: 4,
					title: '宁大学生就科学躲避鸟粪写了篇论文'
				},
				{
					id: 5,
					title: '奶业产能过剩'
				}
			]
		},
		{
			ranking: '民生榜',
			icon: 'https://fyb-pc-static.cdn.bcebos.com/static/asset/novel_5fb0d32e1a2fa7f88230f0f5465e857f.png',
			list: [
				{
					id: 7,
					title: '印尼女子被10米巨蟒生吞'
				},
				{
					id: 8,
					title: '12名官员集体发声'
				},
				{
					id: 9,
					title: '菲律宾撕票绑架中国游民'
				},
				{
					id: 10,
					title: '新疆有自己的朋友圈'
				},
			]

		}
	])
	
	// 点击列表项
	const toDatails = (item, id) => {
		jumpToNewsDetails(item.ranking, id)
	}
</script>

<style lang="scss" scoped>
	.news-fun-box {
		width: 100%;
		height: calc(100vh - 100rpx);
		// margin-top: 100rpx;
		overflow: auto;

		.list-box {
			width: 100%;
			background-color: #fff;
			margin-bottom: 12px;
			padding: 0 24rpx;
			box-sizing: border-box;

			.title-box {
				display: flex;
				align-items: center;
				padding-top: 12px;
				box-sizing: border-box;

				.title-src {
					width: 48rpx;
				}

				.title-text {
					font-size: 28rpx;
					font-weight: 700;
					margin-left: 24rpx;
				}
			}

			.content-box {
				padding: 12px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #ccc;

				.content-sort {
					font-size: 28rpx;
					font-weight: 700;
					margin-right: 24rpx;
				}

				.content-text {
					margin-right: 24rx;
				}
			}

			.content-box:last-child {
				border-bottom: 0 #fff !important;
			}
		}
	}
</style>